<template>
  <div class='cart'>
    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      v-if="cart.length === 0"
    >
      <template #description>
        <div>
          购物车为空，请
          <router-link
            to="/home"
            class="empty-link"
          >选购商品</router-link>
        </div>
      </template>
    </van-empty>
    <template v-else>
      <van-swipe-cell
        v-for="prod in cart"
        :key="prod.id"
      >
        <van-card
          :price="prod.price | money"
          :title="prod.title"
        >
          <template #thumb>
            <van-checkbox :value="prod.checked" @click.stop="modifyChecked({id: prod.id})"></van-checkbox>
            <div
              class="van-image"
              style="width: 80%; height: 100%; margin-left: 6px;"
              @click="$router.push(`/detail/${prod.id}`)"
            >
              <img :src="prod.image" class="van-image__img" style="object-fit: cover;">
            </div>
          </template>
          <template #num>
            <van-stepper
              :value="prod.amount"
              theme="round"
              button-size="18"
              @change="modifyAmount({amount: $event, id: prod.id})"
            />
          </template>
        </van-card>
        <!-- 自定义滑动单元格右侧的按钮 -->
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="removeFromCart({id: prod.id})"
          />
        </template>
      </van-swipe-cell>
    </template>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="totalMoney" button-text="提交订单" @submit="$router.push('/confirm')">
      <van-checkbox
        :value="allChecked"
        @click="modifyAllChecked({checked: !allChecked})"
      >全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span>修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapMutations, mapState, mapGetters } from 'vuex'
export default {
  name: 'Cart',
  data() {
    return {}
  },
  computed: {
    ...mapState({
      cart: state => state.shoppingCartModule.cart,
    }),
    ...mapGetters(['allChecked', 'totalMoney']),
    // allChecked() {
    //   return this.$store.getters.allChecked
    // },
    // // 获取在 store 中 state 内保存的购物车数据
    // cart() {
    //   return this.$store.state.shoppingCartModule.cart
    // },
  },
  methods: {
    // 将各 mutation 方法映射为组件中方法的 `this.$store.commit()` 的调用
    ...mapMutations([
      'removeFromCart',
      'modifyAmount',
      'modifyChecked',
      'modifyAllChecked',
    ]),
    // removeFromCart({ id }) {
    //   this.$store.commit('removeFromCart', { id })
    // },

    // // 处理删除购物车商品
    // handleRemove(id) {
    //   this.removeFromCart({ id })
    // },
    // // 处理步进器中商品数量的变化
    // handleAmountChange(amount, id) {
    //   // 提交 mutation 更新状态数据
    //   // this.$store.commit('modifyAmount', { id, amount })
    //   this.modifyAmount({ id, amount })
    // },
  },
}
</script>

<style lang='less' scoped>
  .custom-image .van-empty__image {
    width: 180px;
    height: 180px;
  }
  .empty-link {
    color: #f00;
  }
  .delete-button {
    height: 100%;
  }
  .van-submit-bar {
    bottom: 105px;
  }
  .van-card__thumb {
    display: flex;
    width: 220px;
  }
</style>
